<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts 平面直角坐标系 - 角度线绘制</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .container {
            width: 95%;
            max-width: 1200px;
            background-color: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            padding: 25px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        h1 {
            text-align: center;
            margin-bottom: 10px;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        }
        .description {
            text-align: center;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 30px;
            font-size: 1.1em;
        }
        .content {
            display: flex;
            flex-wrap: wrap;
            gap: 25px;
        }
        .chart-container {
            flex: 1;
            min-width: 600px;
            height: 550px;
            border-radius: 15px;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.05);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        .control-panel {
            flex: 0 0 320px;
            background: rgba(255, 255, 255, 0.1);
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #fff;
        }
        input[type="number"], input[type="text"] {
            width: 100%;
            padding: 10px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 8px;
            box-sizing: border-box;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            font-size: 16px;
        }
        input[type="color"] {
            width: 100%;
            height: 45px;
            border: none;
            border-radius: 8px;
            background: transparent;
            cursor: pointer;
        }
        button {
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            width: 100%;
            margin-top: 10px;
            transition: all 0.3s;
            font-size: 16px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        }
        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
        }
        .lines-list {
            margin-top: 25px;
            max-height: 250px;
            overflow-y: auto;
            padding-right: 10px;
        }
        .line-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px;
            margin-bottom: 10px;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.1);
            border-left: 4px solid #3498db;
        }
        .line-info {
            flex: 1;
        }
        .line-actions button {
            width: auto;
            padding: 8px 15px;
            margin: 0 0 0 10px;
            background: linear-gradient(135deg, #e74c3c, #c0392b);
        }
        .line-actions button:hover {
            background: linear-gradient(135deg, #c0392b, #a93226);
        }
        .instructions {
            background: rgba(255, 255, 255, 0.1);
            padding: 15px;
            border-radius: 10px;
            margin-top: 20px;
            font-size: 0.9em;
        }
        .instructions h3 {
            margin-top: 0;
            color: #3498db;
        }
        .instructions ul {
            padding-left: 20px;
        }
        .instructions li {
            margin-bottom: 8px;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>平面直角坐标系 - 角度线绘制</h1>
    <p class="description">在圆形背景的直角坐标系中绘制带箭头的角度线，点击线条显示名称</p>

    <div class="content">
        <div class="chart-container" id="main"></div>

        <div class="control-panel">
            <div class="form-group">
                <label for="angle">角度 (0-360度):</label>
                <input type="number" id="angle" min="0" max="360" value="45" step="1">
            </div>

            <div class="form-group">
                <label for="length">线条长度:</label>
                <input type="number" id="length" min="1" max="20" value="10" step="1">
            </div>

            <div class="form-group">
                <label for="name">线条名称:</label>
                <input type="text" id="name" value="角度线">
            </div>

            <div class="form-group">
                <label for="color">线条颜色:</label>
                <input type="color" id="color" value="#3498db">
            </div>

            <button id="add-line">添加角度线</button>

            <div class="lines-list" id="lines-list">
                <h3>已添加的角度线</h3>
            </div>

            <div class="instructions">
                <h3>使用说明</h3>
                <ul>
                    <li>输入角度、长度和名称</li>
                    <li>选择线条颜色</li>
                    <li>点击"添加角度线"按钮</li>
                    <li>点击图表中的线条可查看名称</li>
                    <li>在右侧列表中可删除线条</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<script>
    // 初始化ECharts实例
    const chartDom = document.getElementById('main');
    const myChart = echarts.init(chartDom);

    // 存储角度线数据
    let angleLines = [];

    // 极坐标转直角坐标
    function polarToCartesian(angle, length) {
        const radian = angle * Math.PI / 180;
        const x = length * Math.cos(radian);
        const y = length * Math.sin(radian);
        return [x, y];
    }

    // 生成角度线的数据
    function generateAngleLineData(angle, length, color, name, id) {
        const [x, y] = polarToCartesian(angle, length);

        return {
            id: id,
            name: name,
            type: 'line',
            data: [[0, 0], [x, y]],
            symbol: 'none',
            lineStyle: {
                color: color,
                width: 3,
                type: 'solid'
            },
            label: {
                show: true,
                position: 'end',
                formatter: name,
                color: color,
                fontSize: 14,
                fontWeight: 'bold',
                backgroundColor: 'rgba(0,0,0,0.7)',
                padding: [4, 8],
                borderRadius: 4
            },
            emphasis: {
                lineStyle: {
                    width: 5
                }
            },
            // 添加箭头标记
            markPoint: {
                symbol: 'arrow',
                symbolSize: 20,
                symbolRotate: angle - 90,
                data: [{
                    coord: [x, y],
                    symbol: 'arrow',
                    itemStyle: {
                        color: color
                    }
                }]
            }
        };
    }

    // 更新图表
    function updateChart() {
        const series = [];

        // 添加坐标轴
        series.push({
            type: 'line',
            data: [[-15, 0], [15, 0]],
            symbol: 'none',
            lineStyle: {
                color: 'rgba(255, 255, 255, 0.5)',
                width: 1.5
            }
        });

        series.push({
            type: 'line',
            data: [[0, -15], [0, 15]],
            symbol: 'none',
            lineStyle: {
                color: 'rgba(255, 255, 255, 0.5)',
                width: 1.5
            }
        });

        // 添加角度线
        angleLines.forEach(line => {
            series.push(generateAngleLineData(line.angle, line.length, line.color, line.name, line.id));
        });

        const option = {
            title: {
                text: '角度线绘制工具',
                left: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize: 22,
                    fontWeight: 'bold'
                }
            },
            backgroundColor: 'transparent',
            grid: {
                left: '10%',
                right: '10%',
                bottom: '10%',
                top: '15%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                min: -15,
                max: 15,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.5)'
                    }
                },
                axisLabel: {
                    show: false // 隐藏坐标轴值
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: 'rgba(255, 255, 255, 0.2)'
                    }
                }
            },
            yAxis: {
                type: 'value',
                min: -15,
                max: 15,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.5)'
                    }
                },
                axisLabel: {
                    show: false // 隐藏坐标轴值
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: 'rgba(255, 255, 255, 0.2)'
                    }
                }
            },
            series: series,
            tooltip: {
                trigger: 'item',
                formatter: function(params) {
                    if (params.seriesIndex > 1) {
                        const line = angleLines[params.seriesIndex - 2];
                        return `<div style="font-weight:bold;color:${line.color}">${line.name}</div>
                                    <div>角度: ${line.angle}°</div>
                                    <div>长度: ${line.length}</div>`;
                    }
                    return '';
                },
                backgroundColor: 'rgba(0,0,0,0.8)',
                borderColor: 'rgba(255,255,255,0.3)',
                textStyle: {
                    color: '#fff'
                }
            },
            animation: true
        };

        myChart.setOption(option);
    }

    // 添加角度线
    document.getElementById('add-line').addEventListener('click', function() {
        const angle = parseInt(document.getElementById('angle').value);
        const length = parseInt(document.getElementById('length').value);
        const color = document.getElementById('color').value;
        const name = document.getElementById('name').value || `角度线${angleLines.length + 1}`;

        if (isNaN(angle) || isNaN(length)) {
            alert('请输入有效的角度和长度值');
            return;
        }

        const normalizedAngle = angle % 360;
        const id = Date.now(); // 使用时间戳作为唯一ID

        angleLines.push({
            id: id,
            angle: normalizedAngle,
            length: length,
            color: color,
            name: name
        });

        updateChart();
        updateLinesList();
    });

    // 更新线条列表
    function updateLinesList() {
        const linesList = document.getElementById('lines-list');
        linesList.innerHTML = '<h3>已添加的角度线</h3>';

        if (angleLines.length === 0) {
            linesList.innerHTML += '<p style="text-align:center;padding:15px;">暂无角度线</p>';
            return;
        }

        angleLines.forEach((line, index) => {
            const lineItem = document.createElement('div');
            lineItem.className = 'line-item';

            lineItem.innerHTML = `
                    <div class="line-info">
                        <span style="color: ${line.color}; font-weight: bold;">${line.name}</span><br>
                        <span style="font-size:0.9em;opacity:0.8;">角度: ${line.angle}° | 长度: ${line.length}</span>
                    </div>
                    <div class="line-actions">
                        <button data-index="${index}">删除</button>
                    </div>
                `;

            linesList.appendChild(lineItem);
        });

        // 添加删除事件监听
        document.querySelectorAll('.line-actions button').forEach(button => {
            button.addEventListener('click', function() {
                const index = parseInt(this.getAttribute('data-index'));
                angleLines.splice(index, 1);
                updateChart();
                updateLinesList();
            });
        });
    }

    // 添加点击事件显示线条名称
    myChart.on('click', function(params) {
        if (params.seriesIndex > 1) {
            const line = angleLines[params.seriesIndex - 2];
            alert(`线条名称: ${line.name}\n角度: ${line.angle}°\n长度: ${line.length}`);
        }
    });

    // 初始渲染
    updateChart();
    updateLinesList();

    // 响应窗口大小变化
    window.addEventListener('resize', function() {
        myChart.resize();
    });
</script>
</body>
</html>